<template>
  <div class="allpage">
    <el-form :inline="true"  class="sta-top form-style" ref="ruleForm" :model="ruleForm">
      <el-form-item style="margin:15px 0 15px 30px">
        <el-date-picker
          @change="getSTime"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          v-model="ruleForm.startTime"
          type="date"
          placeholder="订单日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item style="margin:15px 0 15px 30px">
        <span>--</span>
      </el-form-item>
      <el-form-item style="margin:15px 0 15px 30px">
        <el-date-picker
          @change="getSTimes"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          v-model="ruleForm.endTime"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item style="margin:15px 0 15px 30px">
        <el-button
          icon="el-icon-search"
          style="margin-left:30px"
          type="primary"
          @click="search('ruleForm')"
        >搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="table-style">
      <el-form  :inline="true" :model="formInline" class="sta-mid-div">
        <el-form-item label="账户余额:"><div style="color:red">￥2000</div></el-form-item>
        <el-form-item label="团长总数:"><div>200</div></el-form-item>
        <el-form-item label="商品总数:"><div>200</div></el-form-item>
        <el-form-item label="订单总数:"><div>200</div></el-form-item>
        <el-form-item label="交易总额:"><div>200</div></el-form-item>
      </el-form>
    <el-table :data="tableData" style="width: 96%;margin:0 auto" border >
      <el-table-column prop="Date" label="日期"></el-table-column>
      <el-table-column prop="OrderCount" label="订单数"></el-table-column>
      <el-table-column prop="ALLPrice" label="销售总额(GMV)" width="150"></el-table-column>
      <el-table-column prop="" label="团长销售总额(GVM)" ></el-table-column>
      <el-table-column prop="" label="小龙直营(销售总额)"></el-table-column>
      <el-table-column  label="提现总金额">--</el-table-column>
      <el-table-column prop="" label="小龙直营团长分成">-</el-table-column>
      <el-table-column prop="" label="小龙直营毛利">-</el-table-column>
      <el-table-column label="手续费毛利">-</el-table-column>
      <el-table-column prop="ClientPrice" label="新增团长数">-</el-table-column>
      <el-table-column prop="NewBCount" label="新增活动数"></el-table-column>
      <el-table-column prop label="新增商品数">--</el-table-column>
      <el-table-column label="浏览量(次)">-</el-table-column>
    </el-table>
    <botpage
      class="botpage-style"
      :currentPage="currentPage"
      :PageSize="PageSize"
      :total="total"
      @handleCurrentChange="currentChange"
      @handleSizeChange="pageSizeChange"
    />
    </div>
  </div>
</template>

<script>
import Botpage from "@/components/botpage/Botpage/";
import { CountApi } from "@/request/api";
export default {
  components: {
    Botpage,
  },
  data() {
    return {
      formInline: {},
      ruleForm: {
        startTime: null,
        endTime: null,
      },
      tableData: [],
      currentPage: 1,
      PageSize: 10,
      total: 1,
    };
  },
  methods: {
    search(valDate) {
      this.getTableDatas();
    },
    getTableDatas() {
      CountApi({
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        StartTime: this.ruleForm.startTime,
        EndTime: this.ruleForm.endTime,
      })
        .then((res) => {
          if (res.StatusCode === 200) {
            this.tableData = res.Data;
            this.currentPage = res.PageIndexs;
            this.PageSize = res.PageCount;
            this.total = res.DataCounts;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableDatas();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableDatas();
    },
    getSTime(val) {
      this.ruleForm.startTime = val;
    },
    getSTimes(val) {
      this.ruleForm.endTime = val;
    },
    _initDate() {
      this.ruleForm.startTime = this.getDateNow;
      this.ruleForm.endTime = this.getDateNow;
    },
  },
  created() {
    this._initDate();
  },
  computed: {
    getDateNow() {
      const time = new Date();
      const y = time.getFullYear();
      const m = (time.getMonth() + 1 + "").padStart(2, "0");
      const d = (time.getDate() + "").padStart(2, "0");
      return y + "-" + m + "-" + d;
    },
  },
  mounted() {
    this.getTableDatas();
  },
};
</script>

<style lang="less" scoped>
.sta-mid-div {
  margin: 0 auto;
  width: 96%;
  color: red;
  :first-child {
    margin-right: 20px;
  }
}
</style>